<template>
  <el-container>
    <!-- 顶部导航栏 -->
    <el-header>
        <el-menu :default-active="toIndex()" mode="horizontal" @select="handleSelect"
        text-color="#c3d7f9" active-text-color="#fff">
          <div class="home-title">数字档案库房管理系统</div>
          <template v-for="item in items">
            <el-menu-item :index="item.index" :key="item.index">
              <template slot="title">
                <span slot="title">{{ item.title }}</span>
              </template>
            </el-menu-item>
          </template>
        </el-menu>
    </el-header>
    <!-- 页面主体 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // 水平一级菜单栏的菜单
        { index: 'center', title: '组织中心' },
        { index: 'digitalArch', title: '档案管理' },
        { index: 'knowMan', title: '档案知识化' }
      ]
    };
  },
  methods: {
    // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
    toIndex() {
      return this.$route.path.split('/')[1];
    },
    // 切换菜单栏
    handleSelect(index) {
      this.$router.push('/' + index);
    },
  },
  mounted() { }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}

// 顶部导航栏
.el-header {
  padding: 0 5px;
}
.el-menu {
  background-image: linear-gradient(to right, #4285f4, #004bbc);
}
.home-title {
  float: left;
  padding: 0 30px 0 30px;
  color: #fff;
  font-size: 18px;
  line-height: 60px;
}
.el-menu-item:hover,
.el-menu-item.is-active,
.el-menu-item:focus {
  background-color: #4583e8 !important;
  border-bottom: 3px solid #58d1ff !important;
}

// 页面主体
.el-main {
  padding: 0;
}
.el-main::-webkit-scrollbar {
  // 隐藏滚动条
  display: none;
}
</style>